import React from "react";
import { useLocation ,useSearchParams} from "react-router-dom";
import { useQuerySearch } from "../hooks";
import querystring from "querystring";

export default function One() {
//   console.log(useLocation());
//   const { search } = useLocation();
//   console.log(search);

  //封装解析search函数
  /* function useQuerySearch() {
        const {search}= useLocation();
        const obj = {};
        search.slice(1).split('&').forEach(item => {
        const [key, value] = item.split('=');
            obj[key] = value;
    })
        return obj;
    }
    const { a, b } = useQuerySearch(); */

  // 3- 可以将封装的函数放置到外部
  // const { a, b } = useQuerySearch();

  // 4- 可以使用模块querystring
  // 4-1:安装  cnpm install querystring
  // 4-2:引入  import querystring from "querystring"
  // const {search} = useLocation();
  // console.log(querystring.parse(search.slice(1)));
  // const {a,b} = querystring.parse(search.slice(1));

  

  // 5- 可以使用useSearchParams
    console.log(useSearchParams());
    const [search] = useSearchParams();
    


  return (
    <div>
      <h3>One</h3>
      {/* <p>a:{a}</p> */}
      {/* <p>b:{b}</p> */}
    </div>
  );
}
